<template>
	<div class="allbuju">
		<div id="login">
			<div id="bg"></div>
			<span id="login_title">登录</span>
			<span id="login_title2">物业的好伙伴</span>
			<div id="login_main">
				<input type="text" name="username" v-model="username" placeholder="请输入用户名或手机号码"/>
				<hr />
				<input type="password" name="password" v-model="password" placeholder="请输入密码" />
				<a id="findpasswd">找回密码</a>
				<hr />
				<p id="tip">
					<span>还没有账号?</span>
					<a id="register">去注册</a>
				</p>
				<button id="logining" @click="home">登录</button>
			</div>
			<img id="weixin_logo" src="../svg/weixin.svg">
			<div id="readed">
				<van-checkbox v-model="checked"><span id="readed">我已阅读并同意<a>《用户协议》</a></span></van-checkbox>
			</div>
			
		</div>
	</div>
	
</template>

<script>
import axios from 'axios'  //引入axios

import mock from '../mock/mock.js'  //引入mock
import { Toast } from 'vant';
	export default {
		name: 'login',
		components: {
			
		},
		data() {
			return {
				username: '',
				password: '',
				checked: false,
			};
		},
		methods:{
			checkForm() {
				if(!this.username || !this.password) {
					Toast("用户名和密码不能为空");
					return false;
				}
				if(!this.checked){
					Toast("请勾选用户协议");
					return false;
				}
				else{
					Toast("输入错误");
				}
				return true;
			},
			home() {
				if(!this.checkForm())
					return;
				axios.get('/views/login').then(res=>{
          			console.log(res);
					if(res.data.username==this.username&&res.data.password==this.password){
						Toast("登录成功");
						this.$router.push({path:"/home"});
					}
       		 })
			}	
		}				
	};
</script>

<style lang="less" scoped>
	#login {
		position:relative;
	}
	#bg {
		width: 100%;
		height: 150px;
		position:absolute;
		z-index: -1;
		background: rgb(85,134,232);
	}
	#login_title {
		display: block;
		color: white;
		font-size: 28px;
		padding-top: 20px;
		margin-left: 25px;
	}
	#login_title2 {
		font-size: 12px;
		color: white;
		margin-left: 25px;
	}
	#login_main {
		width: 88%;
		margin: 0 auto;
		margin-top: 20px;
		border: 1px solid rgb(188,188,188);
		border-radius: 10px;
		background: white;
	}
	#login_main input {
		border: none;
		font-size: 13px;
		margin-top: 18px;
		margin-left: 42px;
		padding-bottom: 5px;
		color: rgb(144,144,144);
	}
	#login_main hr {
		width: 75%;
		color: rgb(188,188,188);
	}
	#findpasswd {
		float: right;
		color: blue;
		font-size: 13px;
		margin-top: 18px;
		margin-right: 42px;
	}
	#tip {
		margin-left: 42px;
		font-size: 9px;
	}
	#register {
		color: blue;
	}
	#logining {
		width:260px;
		height: 32px;
		color: white;
		background: rgb(180,197,251);
		border: none;
		border-radius: 8px;
		margin-top: 80px;
		margin-left:40px;
		margin-bottom: 10px;
	}
	#logining:hover {
		background: rgb(44,82,242);
	}
	#weixin_logo {
		width: 6%;
		display: block;
		margin: 0 auto;
		margin-top: 100px;
		margin-bottom: 15px;
	}
	#readed {
		width: 50%;
		font-size: 9px;
		color: rgb(188,188,188);
		margin: 0 auto;
	}
	#readed a{
		color: blue;
	}
</style>